<template>
  <div id="">
    <headerbox :headerTitle="'钱包明细'" :hasBack='true'></headerbox>
    <tabNav :tabArr="tabArr" class="bgWhite" @tabEvent="tabEvent"></tabNav>
    <div class="mt10 detailView" ref="detailbox">
      <div class="" v-if="idx==0">
        <income :walletDetail="walletDetail"></income>
      </div>
      <div class="" v-else>
        <defray :walletDetail="walletDetail"></defray>
      </div>

    </div>
    <!-- <router-view class="mt10 detailView"></router-view> -->
  </div>
</template>
<script>
import { toChildrenPage } from '@/utils/util.js';
import {userAccountFlow} from '@/utils/ajaxRequest.js';
export default {
  name: "",
  data: () => ({
    tabArr:['收入明细','支出明细'],
    idx:0,
    payOrIncome:0,      //0 :收入 1:支出
    incomeList:[],    //收入明细
    defrayList:[],    //支出明细
    walletDetail:[],    //明细
  }),
  components: {
    tabNav:()=>import('../../template/tabNav'),
    income:()=>import('./income'),
    defray:()=>import('./defray'),
  },
  methods: {
    // 获取账户明细
    getAccountFlow() {
      let self = this;
      let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
      let token = xlyd_loginInfo.token;
      userAccountFlow({
        token:token,
        payOrIncome:self.payOrIncome
      }).then(res=>{
        console.log(res);
        if(res) {
          self.walletDetail = res.data.result;
        }
      })
    },
    tabEvent(data) {
      console.log(data);
      this.$refs.detailbox.scrollTop = 0;//控制标签内容滚动到顶部
      // window.scrollTo(0,0);
      this.idx = data;
      this.payOrIncome = data;  //明细类型

      this.getAccountFlow();
    }
  },
  mounted() {
    //do something after mounting vue instance
    // toChildrenPage(this,'income');
    this.getAccountFlow();
    this.$nextTick(()=>{

    })
  }
}
</script>
<style lang="scss" scoped>
.detailView{
  height: 85vh;
  overflow-y: scroll;
}
</style>
